<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选项卡</title>
		<style type="text/css">
			#div1 button{
				width: 100px; height: 30px;
				background-color: gray; color: white;
				font-size: 18px;
			}
			#div1 .active{
				background-color: orange; color: blue;
			}
			#div1 div{
				width: 340px; height: 300px;
				border: 1px solid black;
				display: none;
			}
		</style>
		<script type="text/javascript">
			//第一步：获取id为div1的div元素节点
			//第二步：获取id为div1的div子节点中的button节点(伪数组)
			//第三步：获取id为div1的div子节点中的div节点(伪数组)
			//第四步：给每个button对象创建一个index属性，并把i值赋值上去
			//第四步：给button添加点击事件
					// 1、清除所有按键上的class属性
					// 2、所有显示文字的div中的style.display赋值为"none"
					// 3、通过this把当前点击的button的class属性赋值"active"
					// 4、通过this把当前点击的div的style.display赋值为"block"
			window.onload = function(){
				var Odiv1 = document.getElementById("div1");
				var Obtns = Odiv1.getElementsByTagName("button");
				var Odivs = Odiv1.getElementsByTagName("div");
				
				for(var i=0; i<Obtns.length; i++){
					
					Obtns[i].index = i;
					
					Obtns[i].onclick = function(){
						for(let j=0; j<Obtns.length; j++){
							Obtns[j].className = "";
							Odivs[j].style.display = "none";
						}
						
						this.className = "active";
						Odivs[this.index].style.display = "block";
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<button class="active">HTML5</button>
			<button>Python</button>
			<button>Java</button>
			<div style="display: block">HTML5是Web中核心语言HTML的规范，用户使用任何手段进行网页浏览时看到的内容原本都是HTML格式的，在浏览器中通过一些技术处理将其转换成为了可识别的信息。HTML5在从前HTML4.01的基础上进行了一定的改进，虽然在技术人员在开发过程中可能不会将这些新技术投入应用，但是对于该种技术的新特性网站开发技术人员是必须要有所了解的</div>
			<div>Python是一种计算机程序设计语言。是一种面向对象的动态类型语言，最初被设计用于编写自动化脚本(shell)，随着版本的不断更新和语言新功能的添加，越来越多被用于独立的、大型项目的开发。</div>
			<div>Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念，因此Java语言具有功能强大和简单易用两个特征。Java语言作为静态面向对象编程语言的代表，极好地实现了面向对象理论，允许程序员以优雅的思维方式进行复杂的编程</div>
		</div>
	</body>
</html>
